 <{assign var=defaultImage value=app::get('image')->getConf('image.set')}>
<{assign var=defaultImage value=$defaultImage['S']['default_image']}>
<{assign var=fontColor value=$setting.fontColor2}>
<div class="section scrollable hotbrandlist" id="HotBrandList_<{$widgets_id}>">
  <div class="hotbrandlist-btn"> <span id="scroller-prev" class="hotbrandlist-btn-prev">
    <input type="submit" name="button" class="btn-scroller-prev prev disable" value="" />
    </span> <span id="scroller-next" class="hotbrandlist-btn-next">
    <input type="submit" name="button" class="btn-scroller-next next" value="" />
    </span> </div>
  <div class="scroller-main">
    <ul class="scroller switchable-content">
      <{foreach from=$data item=adata key=key}>
      <li class="switchable-panel" style="overflow:hidden;text-align:center;vertical-align:center;
    <{if $env.conf.b2c.site.thumbnail_pic_width>0 && $env.conf.b2c.site.thumbnail_pic_height>0}><{/if}>"> <a href="<{link app=b2c ctl=site_product act=index arg=$adata.goods_id}>" target="_blank" title="<{$adata.name}>"> <img src="<{if $adata.udfimg == 'true'}><{$adata.thumbnail_pic|storager}><{elseif $adata.image_default_id}><{$adata.image_default_id|storager:'s'}><{else}><{$defaultImage|storager}><{/if}>"> </a>
        <div class="hotbrandlist-w144">
          <p class="hotbrandlist-w144-title">
              <a style="color:<{$fontColor}>" href="<{link app=b2c ctl=site_product act=index arg=$adata.goods_id}>" target="_blank" title="<{$adata.name}>" >
              <{$adata.name|cut:$setting.maxlength}>
              </a>
          </p>
          <p><em class='hotbrandlist-red'><{$adata.price|cur_odr}></em></p>
        </div>
      </li>
      <{/foreach}>
    </ul>
  </div>
</div>
<style>
.hotbrandlist li img {
	float:left;
	vertical-align:middle;
	width:40px;
	height:40px;
	padding-right:12px;
}
.hotbrandlist {
	padding:4px 10px 4px 10px;
	height:265px;
}
.hotbrandlist ul {
	height:265px;
	width:198px;
}
.hotbrandlist li {
	height:45px;
	background:url(images/dotted.gif) repeat-x 0 bottom;
	padding:4px 0 4px 0;
}
.hotbrandlist-w144 {
	overflow:hidden;
	text-align:left;
}
.hotbrandlist-w144-title {
	height:30px;
	overflow:hidden;
}
.hotbrandlist-w144-title a {
	color:#333;
}
.hotbrandlist-btn {
	width:36px;
	position:absolute;
	z-index:999;
	margin-left:170px;
	margin-top:-25px;
    *margin-top:-35px;
    margin-top:-32px\0;
}
.btn-scroller-prev {
	background:url(images/scroller.gif) no-repeat 0 0;
	width:10px;
	height:5px;
	border:none;
	cursor:pointer;
}
.hotbrandlist-btn-prev .disable {
	background:url(images/scroller.gif) no-repeat 0 -10px;
	width:10px;
	height:5px;
	border:none;
}
.btn-scroller-next {
	background:url(images/scroller.gif) no-repeat 0 -20px;
	width:10px;
	height:5px;
	border:none;
	cursor:pointer;
}
.hotbrandlist-btn-next .disable {
	background:url(images/scroller.gif) no-repeat 0 -30px;
	width:10px;
	height:5px;
	border:none;
}
.hotbrandlist-red {
	color:#ff0000;
}
.scroller-main {
	overflow:hidden;
	height:265px;
}
.scrollable .disable {
	cursor: default;
}
.scroller {
	position: relative;
	margin: auto;
}
</style>
<script>
var carousel = new Switchable('HotBrandList_<{$widgets_id}>', {
			autoplay:false,
            effect: 'scrolly',
            steps:<{$setting.stepnum|default:'5'}>,
		//	viewSize: [250,265],
		    hasTriggers:false,
			disableCls: 'disable',
            circular: false,
			haslrbtn:true,
            lazyDataType: 'img'
});
</script>